<template>
  <div class="views-page" v-loading="thisLoading">
    <div :key="chradKey" class="chart-box">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="always">
            <schart ref="bar" class="schart" canvasId="bar" :options="options1"></schart>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover">
            <schart ref="line" class="schart" canvasId="line" :options="options2"></schart>
          </el-card>
        </el-col>
      </el-row>
      <div style="height:10px"></div>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-card shadow="always">
            <schart ref="pie" class="schart" canvasId="pie" :options="options3"></schart>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card shadow="hover" style="height:252px;">
          <div slot="header" class="clearfix">
            <span>语言详情</span>
          </div>
          Vue <el-progress :percentage="71.3" color="#42b983"></el-progress>
          JavaScript <el-progress :percentage="24.1" color="#f1e05a"></el-progress>
          CSS <el-progress :percentage="13.7"></el-progress>
          HTML <el-progress :percentage="5.9" color="#f56c6c"></el-progress>
        </el-card>
        <div class="yibiao">
          <el-card shadow="hover" style="min-height:230px;text-align: center;padding-top: 32px;">
            <el-progress type="circle" :percentage="0"></el-progress>
            <el-progress type="circle" :percentage="25"></el-progress>
            <el-progress type="circle" :percentage="100" status="success"></el-progress>
            <el-progress type="circle" :percentage="70" status="warning"></el-progress>
            <el-progress type="circle" :percentage="50" status="exception"></el-progress>
          </el-card>
        </div>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <el-timeline>
            <el-timeline-item v-for="(item,index) in timelineData" :key="index" :timestamp="item.time" placement="top">
              <el-card>
                <h4>{{item.name}}</h4>
                <p>{{item.content}}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Schart from "vue-schart";
import { getHome } from "@/api/getData";
export default {
  name: "HomePage",
  components: {
    Schart
  },
  data() {
    return {
      chradKey: 1,
      timelineData:[],
      options1: {},
      options2: {},
      options3: {}
    };
  },
  computed: {
    thisLoading() {
      return this.$store.state.isLoading;
    },
    isCollapse () {
      return this.$store.getters.collapseState
    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      this.$store.dispatch("changeLoading", true);
      try {
        const res = await getHome()
        const data = res.data
        this.timelineData = data.timelineData;
        this.options1 = data.options1;
        this.options2 = data.options2;
        this.options3 = data.options3;
        this.$store.dispatch("changeLoading", false);
      } catch (error) {
        console.log(error);
      }
    }
  },
  watch: {
    isCollapse() {
      this.chradKey ++
    }
  }
};
</script>
<style lang="less" scoped>
@import url("./less/index.less");
</style>